<template>
  <view class="container">
    <!-- Custom Header (Non-Homepage, Logged-in State) -->
    <custom-header
      :isHomepage="false"
    ></custom-header>

    <!-- Banner -->
    <view class="banner">
      <image class="banner-bg" src="/static/banner-bg.jpg" mode="aspectFill"></image> <!-- Replace with your image path -->
      <view class="banner-overlay">
        <view class="banner-title-area">
          <text class="banner-main-title">今生永恒网</text>
          <view class="banner-sub-area">
            <text class="banner-sub-title">网上纪念馆</text>
            <text class="banner-url">www.cqjsyh.com</text>
          </view>
        </view>
        <view class="banner-slogan-area">
          <text class="banner-slogan">感恩</text>
          <text class="banner-slogan">敬畏</text>
          <text class="banner-slogan">传承</text>
        </view>
      </view>
    </view>

    <!-- Page Title -->
    <text class="page-title">相册列表</text>

    <!-- Main Content Area (White Card) -->
    <view class="main-content">

      <!-- Guestbook Management List -->
      <view class="guestbook-management-list">
        <view class="list-item" v-for="(item, index) in guestbookList" :key="item.id">
          <view class="item-text-area">
			  	<image src="/static/logo.png" mode="" style="width: 88rpx;height: 88rpx;"></image>
			  	<text class="item-content">{{ item.content }}</text>
          </view>
           <!-- Checkbox -->
           <view class="">
				<text>删除</text>
				<text>恢复</text>
           </view>
        </view>
      </view>
      <!-- End Guestbook Management List -->

      <!-- Management Controls -->
      
      <!-- End Management Controls -->

      <!-- Pagination/Record Count -->
      <view class="record-count-pagination">
          <text>共有{{totalRecords}}条记录</text>
          <text class="pagination-text">{{currentPage}}/{{totalPages}} 页</text>
      </view>
       <!-- Note: The image shows 1/1 页 but 6条记录, implying totalPages is actually 1.
            The calculation `Math.ceil(totalRecords / pageSize)` will handle this. -->

    </view>
    <!-- End Main Content Area -->

    <!-- Return Button -->
    <button class="return-button" @click="handleReturnToManagement">返回管理纪念馆</button>


    <!-- QR Codes Section -->
    <view class="qr-codes-section">
      <view class="qr-item">
         <image class="qr-image" src="/static/qrcode1.jpg" mode="widthFix"></image> <!-- Replace with your QR code image path -->
         <text class="qr-label">微信公众号</text>
      </view>
       <view class="qr-item">
         <image class="qr-image" src="/static/qrcode2.jpg" mode="widthFix"></image> <!-- Replace with your QR code image path -->
         <text class="qr-label">客服微信</text>
       </view>
    </view>

    <!-- Footer -->
    <view class="footer">
      <view class="footer-links">
        <text>网上纪念馆</text>
        <text>|</text>
        <text>天堂资讯</text>
        <text>|</text>
        <text>帮助中心</text>
        <text>|</text>
        <text>关于今生永恒网</text>
        <text>|</text>
        <text>联系今生永恒网</text>
      </view>
       <view class="footer-copyright">
         <text>版权所有©今生永恒网 www.cqjsyh.com</text>
         <text>服务条款 [渝ICP备2025058791号-1]</text>
       </view>
    </view>

    <!-- No Floating Button shown in this screenshot -->

  </view>
</template>

<script setup>
import { ref, onMounted, computed } from 'vue';
import CustomHeader from '@/components/header/index.vue'; // Adjust path as needed


// Sample data for guestbook list
const guestbookList = ref([
    { id: 1, content: '想你了', user: '阿伟', date: '2025/4/28', status: '正常' },
    { id: 2, content: '祈福，明天都会好的', user: '阿伟', date: '2025/4/27', status: '正常' },
    { id: 3, content: '想你了', user: '阿伟', date: '2025/4/25', status: '正常' },
    { id: 4, content: '生日快乐', user: '阿伟', date: '2025/4/24', status: '正常' },
    { id: 5, content: '奶奶吃烧鸡', user: '阿伟', date: '2025/4/23', status: '正常' },
    { id: 6, content: '奶奶', user: '阿伟', date: '2025/4/18', status: '正常' },
    // Add more sample entries if needed
]);

// Data for management controls
const statusOptions = ref(['正常', '待审核', '已删除']); // Sample status options
const selectedStatusIndex = ref(0); // Default select '正常'

// Selection state for checkboxes
const selectedItemIds = ref([]);

// Pagination data (Based on sample list)
const totalRecords = computed(() => guestbookList.value.length); // Total records currently displayed
const currentPage = ref(1); // Assuming current page is 1
const pageSize = ref(10); // Assuming a page size (not explicitly shown, but needed for totalPages calculation)
const totalPages = computed(() => Math.ceil(totalRecords.value / pageSize.value)); // Calculate total pages


// Computed property for Select All checkbox state
const isAllSelected = computed(() => selectedItemIds.value.length === guestbookList.value.length && guestbookList.value.length > 0);


// Ensure auth state is loaded when the page mounts (especially for H5 refresh)
onMounted(() => {
    loadAuthState();
    // In a real app, you would fetch the guestbook list for the specific memorial hall
    // (likely passed via query parameter) from an API and bind it to guestbookList.
    // You would also fetch the total record count and handle pagination.
});

// --- Header Event Handlers (Forwarding or handling navigation) ---
const handleGoHome = () => {
  console.log('Navigating to Home from Guestbook Management');
  uni.reLaunch({ url: '/pages/index/index' }); // Replace with your homepage path
};

const handleGoBack = () => {
  console.log('Navigating Back from Guestbook Management');
  uni.navigateBack();
};

const handleLogout = () => {
   console.log('Logging out from Guestbook Management');
   logout(); // This handles token removal and state update
   // Optionally redirect after logout
   // uni.reLaunch({ url: '/pages/index/index' });
};

const handleManageCenter = () => {
    console.log('Navigating to Management Center from Guestbook Management');
     uni.navigateTo({ url: '/pages/management_center/management_center' }); // Replace with your management center page path
};

// --- Page Specific Event Handlers ---
const toggleItemSelection = (id) => {
  const index = selectedItemIds.value.indexOf(id);
  if (index > -1) {
    selectedItemIds.value.splice(index, 1); // Deselect
  } else {
    selectedItemIds.value.push(id); // Select
  }
  console.log('Selected items:', selectedItemIds.value);
};

const toggleSelectAll = () => {
  if (isAllSelected.value) {
    selectedItemIds.value = []; // Deselect all
  } else {
    selectedItemIds.value = guestbookList.value.map(item => item.id); // Select all
  }
   console.log('Select All toggled. Selected items:', selectedItemIds.value);
};

const bindStatusChange = (e) => {
  selectedStatusIndex.value = e.detail.value;
  console.log('Selected status for batch update:', statusOptions.value[selectedStatusIndex.value]);
};

const handleExecute = () => {
    console.log('Execute button clicked');
    if (selectedItemIds.value.length === 0) {
        console.log('No items selected.');
        uni.showToast({ title: '请选择要操作的留言', icon: 'none' });
        return;
    }
    const statusToSet = statusOptions.value[selectedStatusIndex.value];
    console.log(`Applying status "${statusToSet}" to items with IDs:`, selectedItemIds.value);
    // Implement logic to send batch update request to backend API
    // After successful update, refresh the list and clear selection
    // selectedItemIds.value = [];
    // fetchData(); // Reload guestbook list
};

const handleReturnToManagement = () => {
    console.log('Return to Memorial Management button clicked');
     // Navigate back to the Memorial Management page
    uni.navigateBack();
    // Or if navigating directly (e.g., from management center index):
    // uni.navigateTo({ url: '/pages/memorial_management/memorial_management' });
};

// Note: Pagination logic (prevPage, nextPage, bindPageChange) from previous guestbook page
// is not implemented here as this page shows "1/1 页" and "共有6条记录".
// If full pagination is needed, adapt the logic from the previous guestbook page.

</script>

<style scoped>
/* Scoped styles for this page */
/* Reusing common styles from previous pages */
.container {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  background-color: #f5f5f5; /* Match background color */
   padding-bottom: 40rpx; /* Add some padding at the bottom */
   box-sizing: border-box; /* Include padding in height calculation */
}

/* Custom Header - Styles are in CustomHeader.vue */
/* Need padding on main content to clear fixed header */

/* Banner Styles - Copied from previous pages */
.banner {
  width: 100%;
  height: 300rpx; /* Adjust height as needed */
  position: relative;
  overflow: hidden;
}
.banner-bg {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}
.banner-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 30rpx 40rpx; /* Adjust padding */
  color: #fff; /* Text color on banner */
  text-shadow: 1rpx 1rpx 2rpx rgba(0,0,0,0.5);
}
.banner-title-area {
  display: flex;
  align-items: flex-end;
}
.banner-main-title {
  font-size: 50rpx; /* Adjust font size */
  font-weight: bold;
  margin-right: 20rpx;
}
.banner-sub-area {
  display: flex;
  flex-direction: column;
  font-size: 24rpx; /* Adjust font size */
}
.banner-url {
   font-size: 20rpx; /* Adjust font size */
}
.banner-slogan-area {
  display: flex;
  justify-content: flex-end; /* Align to the right */
  font-size: 36rpx; /* Adjust font size */
}
.banner-slogan {
  margin-left: 30rpx; /* Spacing between slogans */
  font-weight: bold;
}

/* Page Title */
.page-title {
  font-size: 36rpx;
  font-weight: bold;
  text-align: center;
  margin-top: 40rpx; /* Space below banner */
  margin-bottom: 30rpx; /* Space above main content area */
  color: #333;
}

/* Main Content Area (White Card) */
.main-content {
  background-color: #fff; /* White background */
  margin: 0 20rpx; /* Side margins */
  padding: 30rpx; /* Inner padding */
  border-radius: 10rpx;
  box-shadow: 0 2rpx 10rpx rgba(0,0,0,0.05); /* Subtle shadow */
  display: flex;
  flex-direction: column;
  /* No align-items: center here, content is left-aligned within card */
}

/* Guestbook Management List Styles */
.guestbook-management-list {
    /* No specific styles needed here, children handle layout */
	display: flex;
	flex-wrap: wrap;
	gap: 0 20rpx;
}
.list-item {
	width: calc(50% - 10rpx);
    display: flex;
	flex-direction: column;
    align-items: flex-start; /* Align items to the top */
    padding: 20rpx 0; /* Vertical padding */
    border-bottom: 1rpx dashed #eee; /* Dashed separator */
}
.list-item:last-child {
    border-bottom: none; /* No border for the last item */
    padding-bottom: 0; /* Remove bottom padding for the last item */
}

.item-text-area {
    flex: 1; /* Text area takes remaining space */
    display: flex;
	flex-direction: column;
    margin-right: 20rpx; /* Space before checkbox */
}

.item-content {
    font-size: 28rpx;
    color: #333;
    margin-bottom: 8rpx; /* Space below content */
    word-break: break-word; /* Break long words if needed */
    white-space: pre-wrap; /* Preserve line breaks if any */
}
.item-info {
    font-size: 24rpx;
    color: #666; /* Gray color for info line */
}
.item-status {
    color: #4CAF50; /* Green color for status text */
}

/* Management Controls Styles */
.management-controls {
    display: flex;
    align-items: center;
    margin-top: 30rpx; /* Space above controls */
    margin-bottom: 20rpx; /* Space below controls */
     font-size: 28rpx;
    color: #333;
}

.management-controls text {
    /* Style for labels like "将所选留言设为:" */
    margin-right: 10rpx;
     flex-shrink: 0; /* Prevent label from shrinking */
}

/* Status Picker Styled as a Button/Input */
.status-picker-wrapper {
    position: relative;
    flex-shrink: 0; /* Prevent shrinking */
    height: 60rpx; /* Match button height */
    line-height: 60rpx;
    font-size: 26rpx; /* Match button font size */
    color: #333;
    background-color: #fff; /* White background */
    border: 1rpx solid #ddd; /* Border */
    border-radius: 8rpx;
    margin-right: 10rpx; /* Space before execute button */
    padding: 0 30rpx 0 20rpx; /* Padding for text and arrow */
    display: flex;
    align-items: center;
}
.picker-text {
    flex: 1; /* Allow text to grow */
    text-align: center; /* Center text */
}
.picker-arrow-icon {
     position: absolute;
    right: 10rpx;
    font-size: 24rpx;
    color: #666;
}

/* Execute Button Styles */
.execute-button {
    /* Gray/White button style */
    flex-shrink: 0; /* Prevent shrinking */
    height: 60rpx;
    line-height: 60rpx;
    font-size: 26rpx;
    color: #333;
    background-color: #eee; /* Light gray background */
    border: 1rpx solid #ccc; /* Subtle border */
    border-radius: 8rpx;
    padding: 0 20rpx; /* Horizontal padding */
     margin-right: 20rpx; /* Space before select all checkbox */
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Select All Checkbox Styles */
.select-all-checkbox {
    display: flex;
    align-items: center;
    flex-shrink: 0; /* Prevent shrinking */
    /* No margin needed if it's the last item */
     font-size: 28rpx; /* Match label font size */
     color: #333; /* Match label text color */
}
/* Adjust space between checkbox and text label */
.select-all-checkbox checkbox {
    margin-right: 10rpx;
}

/* Record Count and Pagination Styles */
.record-count-pagination {
    display: flex;
    justify-content: center; /* Center the text */
    font-size: 26rpx;
    color: #666; /* Gray color */
    margin-top: 20rpx; /* Space above pagination */
}
.pagination-text {
    margin-left: 20rpx; /* Space between total count and pagination */
    color: red; /* Red color for current page / total pages */
}

/* Return Button Styles */
.return-button {
   /* Gray/White button style - same as cancel button on settings page */
    width: calc(100% - 40rpx); /* Take full width minus side padding of main content */
    height: 90rpx;
    line-height: 90rpx;
    font-size: 32rpx;
    color: #333; /* Dark gray text */
    background-color: #e0e0e0; /* Light gray background */
    border: 1rpx solid #ccc; /* Subtle border */
    border-radius: 8rpx;
    text-align: center;
     margin-top: 30rpx; /* Space above button */
     margin-left: 20rpx; /* Align with main content left */
     margin-right: 20rpx; /* Align with main content right */
     margin-bottom: 0; /* No bottom margin before QR codes */
      display: flex;
     align-items: center;
     justify-content: center;
}


/* QR Codes Section - Copied from previous pages */
.qr-codes-section {
    display: flex;
    justify-content: space-around;
    padding: 40rpx 0; /* Vertical padding */
    margin-top: 30rpx; /* Space above section */
     margin-left: 20rpx; /* Side margins */
     margin-right: 20rpx;
}
.qr-item {
    display: flex;
    flex-direction: column;
    align-items: center;
}
.qr-image {
    width: 200rpx;
    height: 200rpx;
    /* Need actual images */
    background-color: #eee; /* Placeholder background */
}
.qr-label {
    font-size: 26rpx;
    color: #555;
    margin-top: 10rpx;
}

/* Footer Styles - Copied from previous pages */
.footer {
  margin-top: 40rpx;
  padding: 40rpx 20rpx;
  background-color: #f0f0f0; /* Light gray background */
  text-align: center;
   margin-top: auto; /* Push footer to the bottom */
   box-sizing: border-box;
}
.footer-links {
  font-size: 26rpx;
  color: #555;
  margin-bottom: 20rpx;
}
.footer-links text {
  margin: 0 10rpx;
}
.footer-copyright {
  font-size: 22rpx;
  color: #888;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.footer-copyright text {
    margin-bottom: 5rpx;
}

/* Padding to clear the fixed header */
/* This style is crucial for pages using the fixed custom header */
.page-content-wrapper {
    padding-top: 88rpx; /* Height of the fixed header */
    flex: 1; /* Allow content to take space */
    display: flex;
    flex-direction: column;
}
</style>